<template>
  <div class="addressEdit">
    <PageTitle :title="addressInfo ? '修改地址' : '添加地址'"></PageTitle>
    <van-address-edit
      :area-list="areaList"
      :show-delete="addressInfo ? true : false"
      show-set-default
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      :address-info="addressInfo ? addressInfo : {}"
    />
  </div>
</template>

<script>
import PageTitle from "@/components/PageTitle";
import { areaList } from "@vant/area-data";
import { mapMutations } from "vuex";
export default {
  name: "AddressEdit",
  data() {
    return {
      areaList,
      addressInfo: null,
      cityList: null,
    };
  },
  components: {
    PageTitle,
  },
  created() {
    this.getCityList();
  },
  activated() {
    this.addressInfo = null;
    let info = this.$route.params.addressInfo;
    if (!info) return;
    let addressInfo = {
      id: info.id,
      name: info.name,
      tel: info.tel,
      province: info.address.split(" ")[0],
      city: info.address.split(" ")[1],
      county: info.address.split(" ")[2],
      addressDetail: info.address.split(" ")[3],
      isDefault: Boolean(info.isDefault),
    };
    for (let code in areaList.county_list) {
      if (areaList.county_list[code] == addressInfo.county) {
        addressInfo.areaCode = code;
        break;
      }
    }
    this.addressInfo = addressInfo;
  },
  methods: {
    ...mapMutations(["changeLoading"]),
    getCityList() {
      this.changeLoading(true);
      this.$axios.get("/api/city_list").then((d) => {
        this.changeLoading(false);
        console.log("city_list", d.data);
        if (d.data.status == 200) {
          this.cityList = d.data.data;
        } else if (d.data.status == 410000) {
          this.$toast.fail("请重新登录");
          this.$store.commit("loginOut");
          this.$router.push("/login");
        } else {
          this.$toast.fail(d.data.msg);
          this.$router.go(-1);
        }
      });
    },
    onSave(e) {
      this.changeLoading(true);
      let cityId = null;
      for (let p of this.cityList) {
        if (p.n == e.province) {
          cityId = p.v;
          for (let c of p.c) {
            if (c.n == e.city) {
              cityId = c.v;
              for (let d of c.c) {
                if (d.n == e.county) {
                  cityId = d.v;
                  break;
                }
              }
              break;
            }
          }
          break;
        }
      }
      // console.log(cityId);
      this.$axios
        .post("/api/address/edit", {
          address: {
            province: e.province,
            city: e.city,
            district: e.county,
            city_id: cityId,
          },
          id: e.id,
          detail: e.addressDetail,
          is_default: Number(e.isDefault),
          phone: e.tel,
          post_code: "",
          real_name: e.name,
        })
        .then((d) => {
          this.changeLoading(false);
          console.log("address/edit", d.data);
          if (d.data.status == 200) {
            this.$toast.success("保存成功");
            this.$router.go(-1);
          } else if (d.data.status == 410000) {
            this.$toast.fail("请重新登录");
            this.$store.commit("loginOut");
            this.$router.push("/login");
          } else {
            this.$toast.fail(d.data.msg);
            this.$router.go(-1);
          }
        });
    },
    onDelete(e) {
      if (!e.id) {
        this.$toast.fail("地址不存在");
        this.$router.go(-1);
        return;
      }
      this.changeLoading(true);
      this.$axios
        .post("/api/address/del", {
          id: e.id,
        })
        .then((d) => {
          this.changeLoading(false);
          console.log("address/del", d.data);
          if (d.data.status == 200) {
            this.$toast.success("删除成功");
            this.$router.go(-1);
          } else if (d.data.status == 410000) {
            this.$toast.fail("请重新登录");
            this.$store.commit("loginOut");
            this.$router.push("/login");
          } else {
            this.$toast.fail(d.data.msg);
            this.$router.go(-1);
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.addressEdit {
  .pageTitle {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .van-address-edit {
    margin-top: 65px;
    ::v-deep.van-address-edit__default .van-switch--on {
      background-color: #25c9c3;
    }
    ::v-deep.van-address-edit__buttons .van-button--danger {
      background-color: #25c9c3;
      border-color: #25c9c3;
    }
  }
}
</style>